<template>
  <div class="app-container" v-loading="loading">

    <el-row :gutter="10">
      <el-col :span="19">
        <standard-template-base-info :detail-info="form" @managerCustomer="managerCustomer"></standard-template-base-info>

        <contract-promise-info :form="form"></contract-promise-info>

        <contract-content-info :detail-info="form"></contract-content-info>
      </el-col>
      <el-col :span="5">
        <flow-record v-if="form.flowId" :id="form.flowId" :custom-style="customerStyle"></flow-record>
        <operation-record :logs="logs"></operation-record>
      </el-col>

    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
    <manager-customer v-if="form.templateClassification>1 && (form.approvalStatus==2||form.approvalStatus==0)" :view-type="0" ref="managerCustomer"
                      @success="selectCustomerSuccess"></manager-customer>
  </div>
</template>

<script>
import StandardTemplateBaseInfo from "@/views/contractTemplate/components/standardTemplate/StandardTemplateBaseInfo.vue";
import ContractPromiseInfo from "@/views/contractTemplate/components/standardTemplate/ContractPromiseInfo.vue";
import ContractContentInfo from "@/views/contractTemplate/components/standardTemplate/ContractContentInfo.vue";
import ManagerCustomer from "@/views/contractTemplate/components/ManagerCustomer.vue";
import ApprovalInfo from "@/views/contractTemplate/components/ApprovalInfo.vue";
import OperationRecord from "@/views/contractTemplate/components/OperationRecord.vue";
import * as contractTemplateApi from "@/api/contractTemplate/contractTemplate";

export default {
  components: {
    ContractContentInfo,
    ContractPromiseInfo,
    StandardTemplateBaseInfo,
    ManagerCustomer,
    ApprovalInfo,
    OperationRecord,
  },
  data() {
    return {
      loading: null,
      form: {},
      flowList: [],
      customerStyle: 'margin:0 0 20px',
      logs: []
    }
  },
  computed: {},
  methods: {

    //合同详情
    getContractTemplateDetail() {
      this.loading = true
      contractTemplateApi.contractTemplateDetails(this.$route.query.id).then(res => {
        this.form = res.data;
        this.form.customersType = this.form.customersType?.split(',')
        this.form.newOrOldCars = this.form.newOrOldCars?.split(',')
        this.form.leadingTheDriver = this.form.leadingTheDriver?.split(',')
        if (this.form.overdueRulesParam) {
          if (this.form.overdueRulesType == 1) {
            this.$set(this.form, 'overdueRulesParam1', this.form.overdueRulesParam)
          } else if (this.form.overdueRulesType == 2) {
            this.$set(this.form, 'overdueRulesParam2', this.form.overdueRulesParam)
          }
        } else {
          this.$set(this.form, 'overdueRulesParam1', null)
          this.$set(this.form, 'overdueRulesParam2', null)
        }
        if (this.form.earlyReturnRules && this.form.earlyReturnRules.length > 0) {
          this.form.earlyReturnRules = this.form.earlyReturnRules.map(item => {
            this.$set(item, 'leaseTerm', [item.minLeaseTerm, item.maxLeaseTerm])
            return item
          })
        }
        if (this.form.templateClassification > 1) {
          this.form.customerIds = this.form.customerIds?.split(',')
        }
        console.log('合同详情-----', this.form)
      }).finally((f) => {
        this.loading = false
      })
    },
    //获取操作记录
    getLog() {
      contractTemplateApi.contractTemplateLog(this.$route.query.id).then(res => {
        this.logs = res.data;
      })
    },
    //关联客户
    managerCustomer() {
      this.$refs.managerCustomer.show('', this.form.id, this.form.customerIds)
    },
    //关联客户回调
    selectCustomerSuccess() {
      this.getContractTemplateDetail()
      this.getLog()
    },
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }

  },
  created() {
    if (this.$route.query.id) {
      this.getContractTemplateDetail()
      this.getLog()
    }
  },

}
</script>

<style lang="scss" scoped>

</style>
